<template>
  <div>
    <h2>{{ cityname }}------城市页面</h2>
    <div id="main" style="width: 7.5rem; height: 10rem"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import "../../utils/map";

import api from "../../api/index";

export default {
  props: ["cityname"],

  mounted() {
    // this.cityMap(id, cityname, data);
    // this.cityMap("main", this.cityname, []);

    api.getCity(this.cityname)
    .then(res=>{
        console.log('----',res.data);
        let arr =res.data.retdata.subList
        let newArr = [];
        arr.forEach(ele=>{
            let obj={}
            obj.name=ele.city;
            obj.value=ele.confirm
            newArr.push(obj)
        })
        console.log('城市----',newArr);
        this.cityMap("main", this.cityname, newArr);
    })
  },

  methods: {
    cityMap(id, cityname, data) {
      console.log(cityname);
      var myChart = echarts.init(document.getElementById(id));
      var option = {
        tooltip: {
          //悬浮弹框
          triggerOn: "click", //提示框触发的条件
          enterable: true,
          formatter(data) {
            //[{} ] data={}
            return data.name;
          },
        },
        visualMap: [
          {
            //映射高亮颜色
            orient: "vertical", //垂直
            type: "piecewise", //离散
            bottom: 0,
            pieces: [
              // 配置颜色区间
              {
                min: 0,
                max: 0,
                color: "#FFFFFF",
              },
              {
                min: 1,
                max: 10,
                color: "#FDFDCF",
              },
              {
                min: 10,
                max: 100,
                color: "#FE9E83",
              },
              {
                min: 100,
                max: 500,
                color: "#E55A4E",
              },
              {
                min: 500,
                max: 10000,
                color: "#4F070D",
              },
            ],
          },
        ],
        series: [
          {
            name: "市",
            type: "map", //地图
            map: cityname, //中国地图
            roam: false,
            zoom: 1.2,
            aspectScale: 0.75,
            top: 40,
            layoutCenter: ["5%", "5%"],
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 8,
                },
              },
            },
            itemStyle: {
              normal: {
                areaColor: "rgba(0,255,236,0)",
                borderColor: "rgba(0,0,0,0.2)",
              },
              emphasis: {
                // 选中的区域颜色及阴影效果等
                areaColor: "rgba(255,180,0,0.8)",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
              },
            },
            data,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
</style>